<template>
  <div>
    <q-input
    v-model="tree"
    color="secondary"
    class="col-12"
    readonly
    anchor="bottom left">
      <template v-slot:append>
        <q-icon name="arrow_drop_down" ></q-icon>
      </template>
    </q-input>
    <p v-if="required" class="text-negative">该字段为必填项</p>
    <q-popup-proxy
    v-model="isshow">
     <p></p>
      <div class="row justify-center">
        <q-input
        style="border:1px solid #4444;"
        class="col-8"
        placeholder='必须输入完整的UNSP名字'
        v-model="seachForm.name">
       </q-input>
        <q-btn
        size="sm"
        color="primary"
        class="q-ml-sm q-pa-sm col-2"
        @click="findtree">搜索
        </q-btn>
      </div>
      <p></p>
      <q-tree
      style="margin-left:40px;"
      :nodes="simples"
      node-key="id"
      ref="tree"
      default-expand-all
      color="primary"
      :expanded.sync="expanded"
      accordion
      :tick-strategy="tickType"
      :selected.sync="selected"
      :ticked.sync="ticked"
      @update:ticked="tickeds"
      @lazy-load="onLazyLoad"></q-tree>
    </q-popup-proxy>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'
export default {
  props: {
    required: {

    }
  },
  data () {
    return {
      number: '1',
      tree: '',
      isshow: false,
      seachForm: {
        name: ''
      },
      expanded: [],
      ticked: [],
      selected: '',
      simples: [],
      parentId: '0',
      id: '',
      tickType: 'strict'
    }
  },
  validations: {
    tree: { required }
  },
  created () {
    this.getTree()
  },
  watch: {
    'isshow' () {
      if (this.isshow === false) {
        console.log(this.ticked)
        if (this.ticked.length === 1) {
          this.tree = this.$refs.tree.getTickedNodes()[0].label
        } else {
          this.tree = ''
        }
      }
    }
  },
  methods: {
    // 单选
    tickeds (ticked) {
      if (ticked.length > 1) {
        this.ticked = [ticked[1]]
      }
    },
    nodeTicked () {
      console.log(this.$refs.tree.getTickedNodes())
    },
    onLazyLoad ({ node, key, done, fail }) {
      console.log(node)
      this.parentId = node.id
      this.$api({
        method: 'post',
        url: '/mdm/unspsc/selectUnspscByTurn',
        params: {
          parentId: this.parentId
        },
        emulateQS: true,
        emulateJSON: false,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let arr = []
          let simple = {}
          for (let i = 0; i < data.length; i++) {
            simple.id = data[i].id
            simple.parentId = data[i].parentId
            simple.label = data[i].name
            if (data[i].grade < 3 || data[i].garde === 3) {
              simple.lazy = true
            } else {
              simple.lazy = false
            }
            arr.push(simple)
            simple = {}
          }
          done(arr)
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    async getTree () {
      await this.$api({
        method: 'post',
        url: '/mdm/unspsc/selectUnspscByTurn',
        params: {
          id: this.id,
          parentId: this.parentId
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let arr = []
          let simple = {}
          for (let i = 0; i < data.length; i++) {
            simple.id = data[i].id
            simple.parentId = data[i].parentId
            simple.label = data[i].name
            if (data[i].grade < 3 || data[i].garde === 3) {
              simple.lazy = true
            } else {
              simple.lazy = false
            }
            arr.push(simple)
            simple = {}
          }
          this.simples = arr
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    async findtree () {
      this.number = 2
      await this.$api({
        method: 'post',
        url: '/mdm/unspsc/getUnspscTreeBySearch',
        params: {
          name: this.seachForm.name
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          console.log(data)
          let expandeds = []
          let selecteds = ''
          let name = this.seachForm.name
          this.simples = data
          function findId (arr) {
            for (let i in arr) {
              console.log(999999999)
              if (arr[i].children instanceof Array) {
                findId(arr[i].children)
                expandeds.push(arr[i].id)
              } else {
                if (arr[i].label === name) {
                  selecteds = arr[i].id
                  expandeds.push(arr[i].id)
                  break
                }
              }
            }
          }
          findId(this.simples)
          this.selected = selecteds
          this.expanded = expandeds
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .q-menu{
    width 100%
  }
</style>
